Курс по HTML5. Основы 2016
HTML 5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов. Сразу стоит отметить, что HTML 5 - это не полностью новая технология или полностью новый стандарт, html5 - это дополненный новыми возможностями html4. Поэтому все что работало в html 4 будет работать и в html5. Конечно, есть некоторые конструкции, которые уже устарели и в html5 не вошли, но об этом мы детально поговорим в самом курсе.
В данном Премиум курсе по HTML 5 мы рассмотрим основы, необходимые для работы.
Что же появилось нового в HTML 5?
Появились новые теги, которые делают разметку страницы более структурированной и семантической: header, footer, article, nav, section...
Появилась новая удобная возможность проигрывать на веб-страницах аудио, видео и все это делать стандартными возможностями браузера, не прибегая к дополнительной установке плагинов в браузер.
Добавилось очень много полезных возможностей по работе с формами. Используя новые формы HTML5, можно избежать многих проверок вводимых данных на javascript. Так же можно без использования javascript и подключения к сайту дополнительных библиотек вывести удобный календарь для выбора даты.
Теперь стало возможным рисование векторных фигур прямо в браузере. Делается это с помощью тега canvas. Именно с помощью данного тега можно рисовать векторные фигуры, а с помощью javascript можно управлять нарисованными фигурами, тем самым создавая анимации, небольшие мультфильмы или даже игры!
Так же с приходом html5 стало возможно хранить некоторые данные на стороне клиента, используя localStorage (локальное хранилище).
Еще одна полезная возможность, которая стала доступна в html5 - это геолокация. То есть теперь мы можем легко определять местоположение посетителя нашего сайтов.
Как видим в рамках курса по html5 поговорить есть о чем, тем более я перечислил не все новшества пятого html, поэтому давайте приступать к его изучению.


Урок 1. Структура документа HTML5:
От автора: в первом уроке курса мы начнем говорить о том, что такое html5. При изучении html5 важно понимать, что это новый стандарт и не все его функции в полном объему могут поддерживаться в том или ином браузере. В уроке мы рассмотрим два сервиса, которые помогут нам определять, какие новшества html5 в каких браузерах поддерживаются. Так же рассмотрим структуру документа html5, проанализируем новый синтаксис тегов.
По итогам данного урока Вы узнаете о том, как проверять поддержку новых возможностей html5 в различных браузерах. И узнаете о новой упрощенной структуре документа.


Урок 2. Тег header и footer:
От автора: в данном уроке мы продолжим изучать HTML5 и начнем изучение новых семантических тегов. Рассмотрим группу тегов, которые формируют разметку страницы. Более подробно рассмотрим теги header и footer. Рассмотрим на реальных примерах где и как применяются данные теги.
По итогам данного урока Вы узнаете, как появились новые семантические теги в html5. А так же узнаете о новых тегах header и footer и способах их применения.


Урок 3. Тег article:
От автора: в третьем уроке курса мы рассмотрим тег article. Данный тег предназначен для выделения независимой части контента. В уроке мы рассмотрим, чем могут быть независимые части контента, рассмотрим несколько примеров использования тега article, а также я расскажу вам про универсальный способ, которые позволяет определить, стоит ли к участку контена применять тег article или нет.
По итогам данного урока Вы узнаете все о теге article, всевозможные случаи и способы его применения, а также научитесь определять, когда уместно использовать данный тег.


Урок 4. Тег section:
От автора: в данном уроке мы рассмотрим тег section, который очень похож на тег article, рассмотренный мы изучили в предыдущем уроке. Узнаем как его использовать в работе. Вообще говоря, тег article является частным случаем тега section и поэтому возникает путаница при использовании данных тегов. В уроке мы с вами подробно разберем использование тега section, а также рассмотрим его отличия и сходства с тегом article. Рассмотрим использование этих двух тегов на реальных примерах, чтобы все окончательно стало понятно.
По итогам данного урока вы узнаете где применять тег section, а также рассмотрим его отличия от тега article. У вас не останется вопросов, в каких случаях какой тег применять.


Урок 5. Теги nav, main и aside:
От автора: в уроке мы продолжаем изучать семантические теги html5. Рассмотрим сразу три несложных тега nav, main и aside. И, хотя названия тегов говорят сами за себя, есть некоторые особенности из применения, о которых стоит рассказать. Так же мы рассмотрим несколько реальных примеров использования данных тегов, чтобы их применение стало окончательно понятным.
По итогам данного урока вы узнаете, в каких случаях и как применять теги nav, main и aside.


Урок 6. Теги figure и figcaption:
От автора: для того, чтобы объединить несколько связных элементов, например, изображение и пояснение к изображению, нам необходимо было оборачивать их в абстрактный блок div. В html5 для этого есть специальные теги figure и figcaption. В уроке мы с вами познакомимся с данными тегами, рассмотрим пример использования данных тегов, а также узнаем о всех особенностях данных тегов.
По итогам данного урока вы узнаете о тегах figure и figcaption, а также узнаете о всех особенностях данных тегов.


Урок 7. Кроссбраузерное оформление HTML5 тегов:
От автора: как я уже говорил в начале нашего курса, не все новшества html 5 поддерживаются всеми браузерами в полном объеме. Более того, если говорить о старых версиях IE, то он вообще не понимает новых тегов, а соответственно для данных тегов мы не сможем назначать стили.
В данном уроке мы с вами рассмотрим способ, как можно добиться того, чтобы старые браузеры начали понимать новые html5 теги и появилась возможность оформлять теги
По итогам данного урока вы узнаете, как «заставить» старые браузеры понимать новые html5 теги.


Урок 8. Тег input. Новые типы тега в html 5. Часть 1:
От автора: тег input в HTML 5 имеет гораздо больше типов. Появились новые типы input для ввода email, для ввода номера телефона, для ввода чисел и др. Так же появилась возможность проверять указанием атрибута для тега input обязательно ли поле для заполнения и соответствуют ли введенные пользователем данные необходимому формату записи. В этом уроке мы с вами рассмотрим все эти возможности HTML 5 на примерах.
По итогам данного урока вы узнаете, какие новые типы тега input появились в HTML 5 и как их использовать.


Урок 9. Тег input. Новые типы тега в html 5. Часть 2:
От автора: в предыдущем уроке мы начали рассматривать новые типы для тега input. Стоит отметить, что все типы тега input рассмотренные в предыдущем уроке обладают хорошей поддержкой браузеров и их уже можно широко использовать. Но тег input в HTML 5 имеет еще несколько новых типов, которые пока поддерживаются не всеми (даже современными) браузерами, но они открывают для нас действительно широкие возможности. В данном уроке мы рассмотрим как раз такие типы для тега input.
По итогам данного урока вы узнаете, какие новые типы тега input появились в HTML 5 и как их использовать.


Урок 10. HTML 5 video. Вставка видео на сайт:
От автора: с появлением нового тега video в html5 установить видео на сайт стало достаточно просто. Однако есть некоторые нюансы, которые нужно учесть для того, чтобы видео гарантировано проигрывалось во всех браузерах. В данном уроке мы рассмотрим, как правильно вставить видео на сайт, что при этом нужно учесть. Так же рассмотрим атрибута тега video, которые расширяют и дополняют возможности для проигрывания видео на сайте.
По итогам данного урока вы узнаете, как правильно вставить видео на сайт с помощью html5, и что при этом необходимо предусмотреть.


Урок 11. HTML 5 audio. Вставка аудио на сайт:
От автора: аналогично вставке видео на сайт, которую мы рассмотрели в предыдущем уроке, в html5 появилась возможность вставить аудио на сайт. Для установки аудио на сайт в html5 появился новый тег audio. Используя его, можно очень быстро и просто вставить аудио на сайт. В данном уроке мы рассмотрим, как это сделать, что при этом нужно учесть. Так же рассмотрим атрибуты тега audio, которые расширяют его и дополняют новыми возможностями.
По итогам данного урока вы узнаете, как правильно вставить аудио на сайт с помощью html5, и что при этом необходимо предусмотреть.


Урок 12. HTML 5 canvas. Рисование в HTML 5:
От автора: с помощью тега canvas в html5 можно рисовать различные объекты на странице. Тег canvas создает область на странице, на которой при помощи команд javascript можно рисовать различные изображения. Использование тега canvas не ограничивается только рисованием. Используя canvas можно создавать анимации и даже игры. В данном уроке мы с вами познакомимся с тегом canvas, рассмотрим html5 canvas примеры и, кончено, порисуем в нем используя команды javascript.
По итогам данного урока вы узнаете, как использовать тег canvas и как на нем рисовать с помощью команд javascript.


Урок 13. HTML5 geolocation. Определение местоположения в HTML 5:
От автора: в html5 есть еще одна новая возможность, которая позволяет определить текущее местоположение пользователя. Наиболее точно определяется позиция для пользователей мобильных устройств, в которых есть GPS. И поскольку количество посетителей сайтов с мобильных устройств становится все больше и больше, данную возможность можно использовать на некоторых сайтах, на странице контактов. В данном уроке мы с вами познакомимся с геолокацией в html5, рассмотрим html5 geolocation пример, в котором определим свое текущее местоположение.
По итогам данного урока вы узнаете, как используя html5 geolocation определить местоположения посетителя сайта.